* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

@keyframes xuan1 {
    from {
        transform: rotateZ(0);
    }
    to {
        transform: rotateZ(360deg);
    }
}

@keyframes xuan2 {
    from {
        transform: rotateZ(30deg);
    }
    to {
        transform: rotateZ(390deg);
    }
}

@keyframes xuan3 {
    from {
        transform: rotateZ(60deg);
    }
    to {
        transform: rotateZ(420deg);
    }
}

@keyframes xuan4 {
    from {
        transform: rotateZ(90deg);
    }
    to {
        transform: rotateZ(450deg);
    }
}

@keyframes xuan5 {
    from {
        transform: rotateZ(120deg);
    }
    to {
        transform: rotateZ(480deg);
    }
}

@keyframes xuan6 {
    from {
        transform: rotateZ(150deg);
    }
    to {
        transform: rotateZ(510deg);
    }
}
//加载页
.toload {
    position: fixed;
    left: 0;
    top: 0 ;
    width: 100%;
    height: 100%;
    z-index: 50;
    overflow: hidden;
    transition: all 1s;
    background-color: #555555;
    >span{
        font-size: 30px;
        position: absolute;
        bottom: 20px;
        left: 10px;
        color: white;
        z-index: 9;
    }
    .xingxing {
        top: 0;
        width: 100%;
        height: 15%;
        margin-top: -2%;
        background-size: 100%;
        background-image: url(../images/520tupian/jiazai5.png);
    }
    .load {
        width: 100%;
        height: 100%;
        position: absolute;
        img {
            width: 100%;
        }
    }
    .huojian {
        top: 36rem;
        left: 35%;
        width: 100%;
        position: absolute;
        img {
            width: 22%;
        }
    }
    .kugo {
        top: 72%;
        left: 83%;
        width: 100%;
        position: absolute;
        img {
            width: 16%;
        }
    }
    .erji {
        top: 85%;
        left: 18%;
        width: 100%;
        position: absolute;
        img {
            width: 35%;
        }
    }
    .skip {
        top: 92%;
        left: 78%;
        width: 100%;
        position: absolute;
        img {
            width: 20%;
        }
    }
}

// 结果页
.end{
    left: 0;
    top: 0 ;
    z-index: 3;
    width: 100%;
    height: 100%;
    transform: translateY(-100%);
    position: fixed;
    background-size: 111%;
    background-color: #FFFFFF;
    background-repeat: no-repeat;
    background-image: url(../images/520tupian/jeishuyebeiji.png);
    .logoright{
        top: 1%;
        left: 0;
        width: 100%;
        position: absolute;
        text-align: right;
        img{
            width: 35%;
        }
    }
    .endleft{
        top: 1%;
        left: 1%;
        width: 100%;
        position: absolute;
        text-align: left;
        img{
            width: 35%;
        }
    }
    .medal{
        top: 10%;
        left: 5%;
        width: 100%;
        position: absolute;
        text-align: center;
        img{
            width: 35%;
        }
    }
    .guess{
        top: 36%;
        left: 5%;
        width: 100%;
        position: absolute;
        text-align: center;
        img{
            width: 50%;
        }
        p{
          margin-top: -12%;
          margin-right: 10%;
          font-size: 20px;
          text-align: center;      
        } 
    }
    .endCenter{
        top: 46%;
        width: 100%;
        position: absolute;
        text-align: center;
        img{
            width: 100%;
        }
         p{
          margin-top: -25%;
          font-size: 20px;
          text-align: center;      
        } 
    }
    .challenge{
        top: 62%;
        left: 3%;
        width: 100%;
        position: absolute;
        text-align: left;
        img{
            width: 40%;
        }
    }
    .share{
        top: 62.5%;
        right: 3%;
        width: 100%;
        position: absolute;
        text-align: right;
        img{
            width: 44%;
        }
    }
    .ranking{
        top: 78%;
        width: 100%;
        position: absolute;
        text-align: center;
        img{
            width: 90%;
        }
    }
    .friend{
        top: 71%;
        width: 100%;
        position: absolute;
        text-align: center;
        img{
            width: 65%;
        }
    }
}


//分享页
.shareol{
    top: 0;
    left: 0;
    z-index: 5;
    width: 100%;
    height: 100%;
    position: fixed;
    transform: translateX(-110%);
    img{
       width: 110%;
   }
}


//开始页
.index{
    top: 0;
    left: 0;
    z-index: 15;
    width: 100%;
    height:100%;
    position: fixed;
    overflow: hidden;
    transition: all 1s;
    background-color: #FFFFFF;
    .logoye {
        top: 0;
        left: 0;
        width: 100%;
        height: 10%;
        position: absolute;
        text-align: right;
        padding: 1% 1% 0 0;
        img {
            width: 40%;
        }
    }
    .light1 {
        width: 0;
        height: 0;
        transform-origin: center;
        -webkit-animation: xuan1 3s linear infinite;
        border-top: 100px solid transparent;
        border-bottom: 100px solid transparent;
        border-left: 62.5rem solid #555;
        border-right: 62.5rem solid #555;
        position: absolute;
        top: -999px;
        left: -999px;
        right: -999px;
        bottom: -999px;
        margin: auto;
    }
    .light2 {
        width: 0;
        height: 0;
        transform-origin: center;
        -webkit-animation: xuan2 3s linear infinite;
        border-top: 100px solid transparent;
        border-bottom: 100px solid transparent;
        border-left: 62.5rem solid #555;
        border-right: 62.5rem solid #555;
        position: absolute;
        top: -999px;
        left: -999px;
        right: -999px;
        bottom: -999px;
        margin: auto;
    }
    .light3 {
        width: 0;
        height: 0;
        transform-origin: center;
        -webkit-animation: xuan3 3s linear infinite;
        border-top: 100px solid transparent;
        border-bottom: 100px solid transparent;
        border-left: 62.5rem solid #555;
        border-right: 62.5rem solid #555;
        position: absolute;
        top: -999px;
        left: -999px;
        right: -999px;
        bottom: -999px;
        margin: auto;
    }
    .light4 {
        width: 0;
        height: 0;
        transform-origin: center;
        -webkit-animation: xuan4 3s linear infinite;
        border-top: 100px solid transparent;
        border-bottom: 100px solid transparent;
        border-left: 62.5rem solid #555;
        border-right: 62.5rem solid #555;
        position: absolute;
        top: -999px;
        left: -999px;
        right: -999px;
        bottom: -999px;
        margin: auto;
    }
    .light5 {
        width: 0;
        height: 0;
        transform-origin: center;
        -webkit-animation: xuan5 3s linear infinite;
        border-top: 100px solid transparent;
        border-bottom: 100px solid transparent;
        border-left: 62.5rem solid #555;
        border-right: 62.5rem solid #555;
        position: absolute;
        top: -999px;
        left: -999px;
        right: -999px;
        bottom: -999px;
        margin: auto;
    }
    .light6 {
        width: 0;
        height: 0;
        transform-origin: center;
        -webkit-animation: xuan6 3s linear infinite;
        border-top: 100px solid transparent;
        border-bottom: 100px solid transparent;
        border-left: 62.5rem solid #555;
        border-right: 62.5rem solid #555;
        position: absolute;
        top: -999px;
        left: -999px;
        right: -999px;
        bottom: -999px;
        margin: auto;
    }
    .middImg {
        top: 9%;
        z-index: 800;
        width: 100%;
        height: 30%;
        position: absolute;
        text-align: center;
        img {
            width: 93%;
        }
    }
    .mouth {
        top: 30%;
        width: 100%;
        height: 30%;
        right: 2%;
        position: absolute;
        text-align: center;
        img {
            width: 100%;
        }
    }
    .person {
        top: 50%;
        width: 100%;
        height: 30%;
        right: 0.1%;
        position: absolute;
        text-align: right;
        img {
            width: 100%;
            animation: tada 1.5s ease infinite;
        }
    }
    .personer {
        top: 87%;
        width: 100%;
        height: 30%;
        right: 0.1%;
        position: absolute;
        text-align: center;
        img {
            width: 62%;
            animation: wobble 1.5s ease infinite;
        }
    }
}

.swiper-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    transition: all 1s; 
    
    .swiper-slide {
        width: 100%;
        width: 100%;
        z-index: 900;
        overflow: hidden;
    }
}

.backgrounder {
    top: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    text-align: center;
    img {
        width: 110%;
        animation: pulse 2s ease infinite;
    }
}

.citydr {
    top: 7%;
    position: absolute;
    text-align: center;
    img {
        width: 90%;
    }
}

.cityWall {
    top: 55%;
    z-index: 800;
    position: absolute;
    img {
        width: 130%;
    }
}

.bacImg {
    top: 20%;
    left: 2%;
    width: 100%;
    height: 60%;
    position: absolute;
    text-align: center;
    img {
        width: 100%;
    }
}

// 摇滚页
.rockandroll {
    width: 100%;
    height: 100%;
    .light1 {
        width: 0;
        height: 0;
        transform-origin: center;
        -webkit-animation: xuan1 3s linear infinite;
        border-top: 100px solid transparent;
        border-bottom: 100px solid transparent;
        border-left: 62.5rem solid #555;
        border-right: 62.5rem solid #555;
        position: absolute;
        top: -999px;
        left: -999px;
        right: -999px;
        bottom: -999px;
        margin: auto;
    }
    .light2 {
        width: 0;
        height: 0;
        transform-origin: center;
        -webkit-animation: xuan2 3s linear infinite;
        border-top: 100px solid transparent;
        border-bottom: 100px solid transparent;
        border-left: 62.5rem solid #555;
        border-right: 62.5rem solid #555;
        position: absolute;
        top: -999px;
        left: -999px;
        right: -999px;
        bottom: -999px;
        margin: auto;
    }
    .light3 {
        width: 0;
        height: 0;
        transform-origin: center;
        -webkit-animation: xuan3 3s linear infinite;
        border-top: 100px solid transparent;
        border-bottom: 100px solid transparent;
        border-left: 62.5rem solid #555;
        border-right: 62.5rem solid #555;
        position: absolute;
        top: -999px;
        left: -999px;
        right: -999px;
        bottom: -999px;
        margin: auto;
    }
    .light4 {
        width: 0;
        height: 0;
        transform-origin: center;
        -webkit-animation: xuan4 3s linear infinite;
        border-top: 100px solid transparent;
        border-bottom: 100px solid transparent;
        border-left: 62.5rem solid #555;
        border-right: 62.5rem solid #555;
        position: absolute;
        top: -999px;
        left: -999px;
        right: -999px;
        bottom: -999px;
        margin: auto;
    }
    .light5 {
        width: 0;
        height: 0;
        transform-origin: center;
        -webkit-animation: xuan5 3s linear infinite;
        border-top: 100px solid transparent;
        border-bottom: 100px solid transparent;
        border-left: 62.5rem solid #555;
        border-right: 62.5rem solid #555;
        position: absolute;
        top: -999px;
        left: -999px;
        right: -999px;
        bottom: -999px;
        margin: auto;
    }
    .light6 {
        width: 0;
        height: 0;
        transform-origin: center;
        -webkit-animation: xuan6 3s linear infinite;
        border-top: 100px solid transparent;
        border-bottom: 100px solid transparent;
        border-left: 62.5rem solid #555;
        border-right: 62.5rem solid #555;
        position: absolute;
        top: -999px;
        left: -999px;
        right: -999px;
        bottom: -999px;
        margin: auto;
    }
    .dengguang {
        top: 0;
        width: 100%;
        height: 30%;
        position: absolute;
        text-align: center;
        img {
            width: 90%;
        }
    }
    .zhujiao {
        top: 12%;
        width: 100%;
        height: 30%;
        z-index: 900;
        position: absolute;
        text-align: center;
        img {
            width: 72%;
        }
    }
    .renqun {
        top: 48.5%;
        width: 100%;
        z-index: 800;
        height: 30%;
        position: absolute;
        img {
            width: 100%;
        }
    }
    .guanzho {
        top: 26%;
        width: 100%;
        height: 30%;
        text-align: left;
        position: absolute;
        img {
            width: 57%;
        }
    }
    .guanzhoer {
        top: 26.5%;
        width: 100%;
        height: 30%;
        text-align: right;
        position: absolute;
        img {
            width: 48%;
        }
    }
}

.songer {
    width: 100%;
    height: 100%;
    .songImg {
        top: 0;
        width: 100%;
        height: 100%;
        position: absolute;
        img {
            width: 111%;
            animation: pulse 2s ease infinite;
        }
    }
    .dengImg {
        top: 0;
        width: 100%;
        text-align: center;
        position: absolute;
        img {
            width: 90%;
        }
    }
    .floor {
        top: 45%;
        width: 100%;
        position: absolute;
        img {
            width: 100%;
        }
    }
    .xiaohuozi {
        top: 12%;
        left: 8%;
        z-index: 600;
        width: 100%;
        position: absolute;
        img {
            width: 85%;
        }
    }
    .dangbanone {
        top: 34%;
        width: 100%;
        z-index: 700;
        text-align: right;
        position: absolute;
        img {
            width: 60%;
        }
    }
    .dahaner {
        top: 12%;
        left: 1%;
        width: 100%;
        position: absolute;
        img {
            width: 100%;
        }
    }
    .dangbantwo {
        top: 28%;
        width: 100%;
        position: absolute;
        img {
            width: 57%;
        }
    }
}

.laosong {
    width: 100%;
    height: 100%;
    .zhuImg {
        width: 100%;
        height: 100%;
        position: absolute;
        img {
            width: 111%;
            animation: pulse 2s ease infinite;
        }
    }
    .topImg {
        top: 0;
        width: 100%;
        left: 28%;
        text-align: right;
        position: absolute;
        img {
            width: 100%;
        }
    }
    .laoren {
        top: 7%;
        left: 6%;
        width: 100%;
        z-index: 900;
        position: absolute;
        img {
            width: 80%;
        }
    }
    .liushengji {
        top: 32%;
        width: 100%;
        text-align: center;
        position: absolute;
        img {
            width: 90%;
        }
    }
}

.popular {
    width: 100%;
    height: 100%;
    .populare {
        top: 0;
        width: 100%;
        height: 100%;
        z-index: 400;
        position: absolute;
        img {
            width: 113%;
            animation: pulse 2s ease infinite;
        }
    }
    .female {
        top: 8%;
        width: 100%;
        height: 100%;
        z-index: 700;
        text-align: right;
        position: absolute;
        img {
            width: 50%;
        }
    }
    .male {
        top: 22%;
        left: 2%;
        width: 100%;
        height: 100%;
        z-index: 700;
        text-align: right;
        position: absolute;
        img {
            width: 100%;
        }
    }
    .duihua {
        top: 2%;
        right: 33%;
        width: 100%;
        height: 100%;
        z-index: 800;
        text-align: right;
        position: absolute;
        img {
            width: 60%;
        }
    }
    .changying {
        top: 30%;
        right: 34%;
        width: 100%;
        height: 100%;
        z-index: 700;
        text-align: right;
        position: absolute;
        img {
            width: 25%;
        }
    }
}

.RBer {
    .rbImg {
        top: 0;
        right: 2rem;
        position: absolute;
        width: 100%;
        height: 100%;
        text-align: center;
        img {
            width: 110%;
            animation: pulse 2s ease infinite;
        }
    }
    .dinbuimg {
        top: 0;
        width: 100%;
        text-align: center;
        position: absolute;
        img {
            width: 90%;
        }
    }
    .vehicle {
        top: 30%;
        width: 100%;
        position: absolute;
        img {
            width: 99%;
            animation: shake 5s ease infinite;
        }
    }
    .yaoyao {
        top: 15%;
        left: 10%;
        width: 100%;
        position: absolute;
        img {
            width: 65%;
            animation: shake 5s ease infinite;
        }
    }
}

.choice {
    width: 100%;
    z-index: 100;
    .choicebox {
        top: 68%;
        width: 100%;
        z-index: 100;
        position: absolute;
        text-align: center;
        img {
            width: 95%;
        }
    }
    .math{
        width: 100%;
        div{
            height: 40px;
            line-height: 40px;
        }
        .optionone {
            top: 71%;
            left: 19%;
            width: 51%;
            z-index: 200;
            position: absolute;
            text-align: center;
        }
        .optiontwo {
            top: 80%;
            left: 19%;
            width: 50%;
            z-index: 200;
            position: absolute;
            text-align: center;
        }
        .optionthree {
            top: 88%;
            left: 19%;
            width: 50%;
            z-index: 200;
            text-align: center;
            position: absolute;
        }
    }
    .timeber {
        top: 71%;
        left: 84.5%;
        width: 10%;
        height: 5%;
        z-index: 200;
        position: absolute;
        h2 {
            font-size: 20px;
        }
    }
    .xiayisho {
        top: 80%;
        left: 86%;
        width: 5%;
        height: 10%;
        z-index: 200;
        position: absolute;
        h2 {
            font-size: 20px;
        }
    }
}